<template>
  <div id='tmpl'>
    <!--头部信息部分-->
      <div class="title">
          <h2 v-text="data.title"></h2>
          <span>{{data.add_time | datefmt('YYYY-MM-DD HH:mm:ss')}} &nbsp; &nbsp; &nbsp; {{data.click}}次浏览</span>
          <p></p>
      </div>
      <!--图片缩略图详细信息-->
      <div class="mui-content">
		        <ul class="mui-table-view mui-grid-view mui-grid-9">
		          <li v-for="(item, index) in list" class="mui-table-view-cell mui-media mui-col-xs-4 mui-col-sm-3">
                	<img class="preview-img"  :src="item.src" height="100" @click="$preview.open(index, list)">
					    </li>
		        </ul> 
		</div>
      
      <!--图片介绍-->
      <p v-html="data.content"></p>
      <!--评论-->
      <comment></comment>
  </div>
</template>
<script>
import common from '../../kikt/comment.js';
import comment from '../subcomment/comment.vue';
import { Toast } from 'mint-ui';
export default {
  components:{
      comment
    },
  data () {
    return {
        id:0,
        data:{},
        list:[]
    };
  },
  created(){
    this.id = this.$route.params.id;
    this.getimgxq();
    this.getmoreimg();
  },
  methods:{
    getimgxq:function(){
      var url = common.apidomain + '/api/getimageInfo/'+this.id;
      this.$http.get(url).then(function(response){
        var data = response.body;
        if(data.status != 0){
          Toast(data.message);
          return
        }
        this.data = data.message[0];
      })
    },
    getmoreimg:function(){
      var url = common.apidomain +'/api/getthumimages/'+this.id;
      this.$http.get(url).then(function(response){
        var list = response.body;
        if(list.status !=0 ){
            Toast(list.message);
            return;
        }
        list.message.forEach(function(element) {
            var img = document.createElement('img');
            img.src = element.src;
            element.w = img.width;
            element.h = img.height;
        });
        this.list = list.message
      })
    }
  }
}
</script>
<style lang="css" scoped>
  .title {
    padding: 5px;
  }
  .title h2 {
    color: #0094FF;
  }
  .title span {
    font-size: 14px;
    color: rgba(0,0,0,0.4);
  }
  .title p {
    margin-top: 10px;
    width: 100%;
    height: 1px;
    border-bottom: 1px solid rgba(0,0,0,0.3);
  }
   .mui-content > .mui-table-view:first-child {
        margin-top: 0px;
    }
    .mui-content {
        background: #fff;
    }

    .mui-grid-view.mui-grid-9 {
        background: #fff;
    }
    .mui-grid-view.mui-grid-9 .mui-table-view-cell {
        border-right: 0px;
        border-bottom: 0px;
    }
</style>